<template>
  <div class="contract-pane">
    <div style="display: flex; justify-content: flex-end">
      <el-button type="primary" icon="Plus" @click="editMode(null)"> 新增 </el-button>
    </div>
    <div class="tab">
      <div class="z-tab">
        <el-table class="table" :data="contractData" border style="width: 100%" v-loading="loading">
          <el-table-column
            v-for="item in column"
            :key="item"
            :label="item.label"
            :prop="item.name"
            :width="item.width"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="operator" label="操作" width="160px" align="center" fixed="right">
            <template #default="scope">
              <el-button
                v-if="
                  scope.row.type?.toLowerCase() === 'jpg' ||
                  scope.row.type?.toLowerCase() === 'png' ||
                  scope.row.type?.toLowerCase() === 'pdf'
                "
                type="primary"
                icon="View"
                link
                @click="viewPdf(scope.row)"
              >
                预览
              </el-button>
              <el-button v-else type="primary" link icon="Download" @click="download(scope.row)">
                下载
              </el-button>
              <el-button type="primary" icon="Edit" link @click="editMode(scope.row)">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="foot">
        <el-pagination
          v-model:currentPage="pageInfo.pageNum"
          :page-size="pageInfo.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <ContractUpdataDrawer ref="meterRecordUpdataRef" @getData="getData"></ContractUpdataDrawer>
    <ViewFileDrawer ref="fileViewDrawer" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { postContractPageLike, getContractById } from '@/api/controller/contract-controller/index'
  import ContractUpdataDrawer from './components/contractUpdataDrawer.vue'
  import ViewFileDrawer from '@/components/fileViewDrawer/index.vue'
  const loading = ref(true)
  const siteId = ref(history.state?.id)
  const column = [
    { name: 'contractName', label: '文件名称' },
    { name: 'remark', label: '备注' },
    { name: 'chargeName', label: '上传人', width: '130px' },
    { name: 'createTime', label: '上传时间', width: '130px' },
  ]

  //获取数据
  const contractData = ref([])
  onMounted(async () => {
    getData()
  })
  const getData = async () => {
    try {
      loading.value = true
      let res = await postContractPageLike({
        ...pageInfo.value,
        ...{ siteId: siteId.value },
      })
      contractData.value = res.data.list
      total.value = res.data.total
    } finally {
      loading.value = false
    }
  }

  //编辑
  const meterRecordUpdataRef = ref()
  const editMode = (data) => {
    meterRecordUpdataRef.value.show(data)
  }

  //文件预览抽屉
  const fileViewDrawer = ref()
  const viewPdf = async (data) => {
    let res = await getContractById({ id: data.id }, { loading: true })
    fileViewDrawer.value.show(res.data)
  }

  //文件下载
  const download = async (row) => {
    let res = await getContractById({ id: row.id }, { loading: true })
    window.open(res.data.contractPath)
  }
  const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
  })
  const total = ref(0)
  const handleSizeChange = (val) => {
    pageInfo.value = {
      pageNum: 1,
      pageSize: val,
    }
    getData()
  }
  const handleCurrentChange = () => {
    getData()
  }
</script>

<style lang="scss" scoped>
  .contract-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0px 20px;
  }
  .tab {
    display: flex;
    flex-direction: column;
    background-color: white;
    flex: 1;
    height: 100%;
    .z-tab {
      position: relative;
      flex: 1;
      height: 100%;
      .table {
        position: absolute;
        height: 100%;
      }
    }
  }
  .foot {
    display: flex;
    justify-content: center;
    padding: 20px 0;
  }
</style>
